<template>
  <div
    class="container"
    @click.stop="
      orderRent = false
      angle = 0
    "
  >
    <div class="home_top">
      <div class="home_top_set">
        <img
          src="@/assets/img/home/ic_setting@2x.png"
          alt=""
          style="width: 24px; height: 24px"
          @click="jumpUrl('/setting', '')"
        />
      </div>
      <!-- 用户信息、订单计时 -->
      <div class="home_top_msg">
        <div>
          <img
            src="@/assets/img/home/logo.png"
            alt=""
            style="width: 80px; height: 80px; margin-right: 10px"
            @click="jumpUrl('/user', '')"
          />
        </div>
        <div style="width: 100%">
          <div class="home_top_msg_name">Youdianstar</div>
          <div style="display: flex; justify-content: space-between">
            <div class="home_top_msg_id">{{ userId | stateUID }}</div>
            <div
              class="home_top_msg_time"
              @click.stop="
                orderRent = !orderRent
                angle = 0
                playAnimation()
              "
              v-show="orderIng.rent.length > 0"
            >
              <div
                ref="lottieContainer1"
                style="width: 28px; height: 28px; margin-right: 8px"
              ></div>
              <!-- <img
                src="@/assets/img/home/ic_charging@2x.png"
                alt=""
                style="width: 24px; height: 24px; margin-right: 8px"
              /> -->
              <span class="home_top_msg_timeTime"
                >{{ days }}:{{ hours }}:{{ minutes }}:{{ seconds }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 租借中订单 -->
      <div
        class="home_content_order"
        v-if="orderRent && orderIng.rent.length > 0"
        @click.stop
      >
        <div
          class="home_content_order_top home_order_active"
          @click="jumpOrder(orderIng.rent[0].orderNo)"
        >
          <div class="home_content_order_top_content">
            <div
              ref="lottieContainer2"
              style="width: 28px; height: 28px; margin-right: 12px"
            ></div>
            <!-- <img
              src="@/assets/img/home/ic_charging@2x2.png"
              alt=""
              style="width: 28px; height: 28px; margin-right: 12px"
            /> -->
            <span class="home_content_order_top_contentTitle">{{
              $t('home_renting')
            }}</span>
          </div>
          <div>
            <img
              src="@/assets/img/home/home_ic_right@2x.png"
              alt=""
              style="width: 44px; height: 44px"
            />
          </div>
        </div>
        <div
          class="home_content_order_top"
          :class="{ home_order_active: angle == 90 }"
          @click="rotateImage"
        >
          <div class="home_content_order_top_content2">
            <div>{{ $t('order_pbID') }}: {{ orderIng.rent[0].pbNo }}</div>
            <div>
              {{ $t('home_duration') }}: {{ days }}:{{ hours }}:{{ minutes }}:{{
                seconds
              }}
            </div>
            <div>
              {{ $t('home_estimatedFees') }}:
              {{ orderIng.rent[0].money | amountFormats($currencyVal.symbol) }}
            </div>
          </div>
          <div
            style="
              width: 92px;
              height: 44px;
              display: flex;
              align-items: center;
            "
          >
            <img
              src="@/assets/img/home/ic_help@2x.png"
              alt=""
              style="width: 44px; height: 44px; margin-right: 4px"
            />
            <img
              :style="{ transform: `rotate(${angle}deg)` }"
              src="@/assets/img/home/home_ic_right@2x.png"
              alt=""
              style="width: 44px; height: 44px; transition: transform 0.3 ease"
            />
          </div>
        </div>
        <div
          class="home_content_order_top"
          v-show="angle == 90"
          style="margin-left: 30px"
          :class="{ home_order_active: item.value != 1 }"
          v-for="item in orderTypeList"
          :key="item.value"
          @click="jumpUrl(item.routeUrl, item.value)"
        >
          <div class="home_content_order_top_content3">
            <div class="home_content_order_top_content_dot">
              <div class="home_content_order_top_content_dotDiv"></div>
            </div>
            <div class="home_content_order_top_contentText">
              {{ item.label }}
            </div>
          </div>
          <div>
            <img
              src="@/assets/img/home/home_ic_right@2x.png"
              alt=""
              style="width: 44px; height: 44px"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="container_page">
      <div class="home_content">
        <!-- 跳转订单、钱包、商家、FAQ -->
        <div class="home_content_top">
          <div
            class="home_content_top_tab"
            v-for="item in tabList"
            :key="item.value"
            @click="jumpUrl(item.routeUrl, '')"
          >
            <div style="margin-bottom: 8px">
              <img :src="item.imgs" alt="" style="width: 42px; height: 42px" />
            </div>
            <div class="home_content_top_tab_label">{{ item.label }}</div>
          </div>
        </div>
        <!-- 订单待支付 / 调查中 -->
        <div
          class="home_content_orderEnd"
          v-show="orderIng.surveying.length > 0 || orderIng.unpaid.length > 0"
          @click="
            jumpOrder(
              orderIng.surveying.length > 0
                ? orderIng.surveying[0].orderNo
                : orderIng.unpaid[0].orderNo
            )
          "
        >
          <div style="display: flex; align-items: center">
            <img
              src="@/assets/img/home/home_ic_unpaid.svg"
              alt=""
              style="width: 16px; height: 16px; margin-right: 8px"
            /><span>{{
              orderIng.unpaid.length > 0
                ? $t('home_unpaidOrder')
                : $t('home_underInvestigation')
            }}</span>
          </div>
          <img
            src="@/assets/img/home/home_ic_right@2x.png"
            alt=""
            style="width: 44px; height: 44px"
          />
        </div>
        <!-- 计费规则 -->
        <div class="home_content_pricePlan" v-if="defaultBilling">
          <div style="display: flex; align-items: center">
            <img
              src="@/assets/img/home/ic_tag@2x.png"
              alt=""
              style="width: 16px; height: 16px"
            /><span class="home_content_Priceplan_title">{{
              $t('order_pricePlan')
            }}</span>
          </div>
          <div
            class="home_content_Priceplan_text"
            v-if="billingRule.billing.isSystem"
          >
            {{ $t('FREE_USAGE') }}
          </div>
          <div class="home_content_Priceplan_text" v-else>
            <span v-if="billingRule.billing.freeDuration">
              {{
                $t('billingRules1')
                  .replace(
                    '$order',
                    billingRule.billing.freeLimit > 0
                      ? $t(`First_order${billingRule.billing.freeLimit}`)
                      : $t('Every_order')
                  )
                  .replace('$freeDuration', billingRule.billing.freeDuration)
                  .replace(
                    '$times1',
                    billingRule.billing.freeDurationControlType == 1
                      ? billingRule.billing.freeDuration > 1
                        ? $t('minute3')
                        : $t('minute2')
                      : billingRule.billing.freeDurationControlType == 2
                      ? billingRule.billing.freeDuration > 1
                        ? $t('hour4')
                        : $t('hour3')
                      : billingRule.billing.freeDuration > 1
                      ? $t('days')
                      : $t('day')
                  )
              }}
            </span>
            <span>
              {{
                $t('billingRules2')
                  .replace(
                    '$thereafter',
                    billingRule.billing.freeDuration ? $t('thereafter') : ''
                  )
                  .replace(/\s+$/, '')
                  .replace('$amount', formatMoney(billingRule.billing.amount))
                  .replace('$cycle', billingRule.billing.cycle)
                  .replace(
                    '$times2',
                    billingRule.billing.controlType == 1
                      ? billingRule.billing.cycle > 1
                        ? $t('minute3')
                        : $t('minute2')
                      : billingRule.billing.controlType == 2
                      ? billingRule.billing.cycle > 1
                        ? $t('hour4')
                        : $t('hour3')
                      : billingRule.billing.cycle > 1
                      ? $t('days')
                      : $t('day')
                  )
              }}{{
                billingRule.billing.dayAmount
                  ? $t('punctuation1')
                  : $t('punctuation2')
              }}
            </span>
            <span v-if="billingRule.billing.dayAmount">
              {{
                $t('billingRules3').replace(
                  '$dayAmount',
                  formatMoney(billingRule.billing.dayAmount)
                )
              }}
            </span>
            <span v-if="billingRule.billing.penaltyAmount">
              {{
                $t('billingRules4')
                  .replace(
                    '$penaltyAmount',
                    formatMoney(billingRule.billing.penaltyAmount)
                  )
                  .replace(
                    '$maxRentDuration',
                    billingRule.billing.maxRentDuration
                  )
                  .replace(
                    '$times3',
                    billingRule.billing.maxDurationControlType == 1
                      ? billingRule.billing.maxRentDuration > 1
                        ? $t('minute3')
                        : $t('minute2')
                      : billingRule.billing.maxDurationControlType == 2
                      ? billingRule.billing.maxRentDuration > 1
                        ? $t('hour4')
                        : $t('hour3')
                      : billingRule.billing.maxRentDuration > 1
                      ? $t('days')
                      : $t('day')
                  )
              }}
            </span>
          </div>
        </div>
        <!-- 租借流程 -->
        <div class="home_content_rentWay">
          <img
            v-if="$i18n.locale == 'ZH'"
            :src="require('@/assets/img/home/illustration_process_cn@2x.png')"
          />
          <img
            v-else-if="$i18n.locale == 'ES'"
            :src="require('@/assets/img/home/illustration_process_es@2x.png')"
          />
          <img
            v-else
            :src="require('@/assets/img/home/illustration_process_en@2x.png')"
          />
        </div>

        <!-- 下载APP -->
        <div class="bannner" @click="downloadApp">
          <div class="left">
            <div class="title">{{ $t('Download_app') }}</div>
            <div class="bannner_btns">
              <img
                style="width: 147px; height: 20px"
                :src="require('@/assets/img/home/download@2x.png')"
              />
            </div>
          </div>
          <div class="right">
            <img
              style="object-fit: contain"
              :src="require('@/assets/img/home/pic@2x.png')"
            />
          </div>
        </div>
      </div>
    </div>
    <bottom-button
      class="home_button"
      :background="''"
      v-show="!orderShow"
      @click="jumpScan"
      homeType
    >
      <img
        src="@/assets/img/home/ic_scan@2x.png"
        alt=""
        style="width: 26px; height: 26px; margin-right: 8px"
      />
      <span style="max-width: 223px">{{ $t('home_scan2rent') }}</span>
    </bottom-button>
  </div>
</template>

<script>
import $api from '@/assets/js/api/home'
import share from '@/mixins/share'
import lottie from 'lottie-web'
import animationData from '@/assets/js/charging_lottlie.json'
export default {
  mixins: [share],
  data () {
    return {
      tabList: [],
      //订单租借中-其他内容
      orderTypeList: [],
      angle: 0, //订单租借中-旋转箭头
      //订单集合
      orderIng: {
        feedback: [], //	需要反馈的订单
        payPrompt: [], // 支付结果提示集合
        rent: [], // 	租借中订单
        surveying: [], // 调查中订单
        unpaid: [] //	未支付订单
      },
      timer: null,
      days: '00',
      hours: '00',
      minutes: '00',
      seconds: '00',
      timed: null,
      orderRent: false,
      androidDownloadUrl: '',
      iosDownloadUrl: '',
      userId: '',
      defaultBilling: null,
      lottieInstance1: null,
      lottieInstance2: null
    }
  },
  computed: {
    //是否显示订单卡片/扫码按钮
    orderShow () {
      return (
        this.orderIng.rent.length > 0 ||
        this.orderIng.surveying.length > 0 ||
        this.orderIng.unpaid.length > 0
      )
    },
    //获取计费规则
    billingRule () {
      let billing = this.defaultBilling
      if (this.orderIng.rent.length > 0) {
        billing = this.orderIng.rent[0]
      } else if (this.orderIng.surveying.length > 0) {
        billing = this.orderIng.surveying[0]
      } else if (this.orderIng.unpaid.length > 0) {
        billing = this.orderIng.unpaid[0]
      }
      return billing
    }
  },
  created () {
    this.userId = localStorage.getItem('userInfo')
      ? JSON.parse(localStorage.getItem('userInfo')).uid
      : ''
    this.regionValue = localStorage.getItem('platformId') || 1
    this.getLang()
    this.getDefautBilling()
    this.startOrderPolling() // 初始化时启动轮询    
    // this.getOrders()
    // this.timer = setInterval(() => {
    //   this.getOrders()
    // }, 3000)
    this.tabList = [
      {
        value: 1,
        label: this.$t('order_order'),
        routeUrl: '/order/list',
        imgs: require('@/assets/img/home/ic_order@2x.png')
      },
      {
        value: 2,
        label: this.$t('wallet_wallet'),
        routeUrl: '/wallet',
        imgs: require('@/assets/img/home/ic_wallet@2x.png')
      },
      {
        value: 3,
        label: this.$t('Merchants'),
        routeUrl: '/merchant',
        imgs: require('@/assets/img/home/ic_merchants@2x.png')
      },
      {
        value: 4,
        label: 'FAQ',
        routeUrl: '/help',
        imgs: require('@/assets/img/home/ic_faq@2x.png')
      }
    ]
    this.orderTypeList = [
      {
        value: 6,
        label: this.$t('home_orderErrText1'),
        routeUrl: '/problem/result'
      },
      {
        value: 5,
        label: this.$t('home_orderErrText2'),
        routeUrl: '/problem/result'
      },
      {
        value: 3,
        label: this.$t('home_orderErrText3'),
        routeUrl: '/problem'
      },
      {
        value: 4,
        label: this.$t('home_orderErrText4'),
        routeUrl: '/problem/result'
      },
      {
        value: 1,
        label: this.$t('help_helpCentre'),
        routeUrl: '/help'
      }
    ]
  },
  mounted () {
    let configs = JSON.parse(localStorage.getItem('configs'))
    configs.forEach(item => {
      if (item.key == 'android-download-url') {
        this.androidDownloadUrl = JSON.parse(item.value).user
      }
      if (item.key == 'ios-download-url') {
        this.iosDownloadUrl = JSON.parse(item.value).user
      }
    })
    this.lottieInstance1 = lottie.loadAnimation({
      container: this.$refs.lottieContainer1, // 绑定 DOM
      renderer: 'svg', // 渲染方式：svg / canvas / html
      loop: true, // 是否循环播放
      autoplay: true, // 是否自动播放
      animationData: animationData // JSON 动画数据
    })
  },
  beforeDestroy () {
    this.clearOrderInterval()
    if (this.lottieInstance1) {
      this.lottieInstance1.destroy() // 组件销毁时清理动画
    }
    if (this.lottieInstance2) {
      this.lottieInstance2.destroy() // 组件销毁时清理动画
    }
  },
  methods: {
    playAnimation () {
      // 如果已经有动画实例，先销毁，避免重复加载
      this.$nextTick(() => {
        if (this.lottieInstance2) {
          this.lottieInstance2.destroy()
        }

        // 重新加载动画
        this.lottieInstance2 = lottie.loadAnimation({
          container: this.$refs.lottieContainer2, // 绑定 DOM
          renderer: 'svg', // 渲染方式：svg / canvas / html
          loop: true, // 是否循环播放
          autoplay: true, // 是否自动播放
          animationData: animationData // JSON 动画数据
        })
      })
    },
    //打开/关闭订单其他选项
    rotateImage () {
      this.angle = this.angle == 0 ? 90 : 0
    },

    startOrderPolling () {
      this.getOrders() // 先获取一次订单

      // 确保定时器不存在时才创建，避免重复轮询
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.getOrders()
        }, 3000)
      }
    },    

    //首页进行中的订单-或未支付订单
    getOrders () {
      $api.getOrdersIng(true).then(res => {
        if (res.code == 0) {
          this.orderIng = res.data

          if (this.orderShow) {
            this.computeTime()
            if (!this.timed) {
              this.timed = setInterval(() => {
                this.computeTime()
              }, 1000)
            }
          } else {
            this.clearOrderInterval() // 如果没有进行中的订单，停止轮询
          }          

          // if (res.data.rent.length != 0) {
          //   this.computeTime()
          //   this.timed = setInterval(() => {
          //     this.computeTime()
          //   }, 1000)
          // } else {
          //   if (this.timed) {
          //     clearInterval(this.timed)
          //     this.timed = null
          //   }
          // }
        }
      })
    },
    // 获取计费规则
    getDefautBilling () {
      $api.getOrdersBilling().then(res => {
        if (res.code != 0) return
        this.defaultBilling = res.data
      })
    },
    //清除定时器
    clearOrderInterval () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      if (this.timed) {
        clearInterval(this.timed)
        this.timed = null
      }
    },

    //时间计算
    computeTime () {
      if (this.orderIng.rent.length == 0) {
        return
      }
      let date1 = this.orderIng.rent[0].createTime
      let date2 = Date.now() || this.orderIng.rent[0].nowTime
      // 如果 创建时间 大于 当前时间时，需将当前时间换成创建时间 显示00:00
      if (date1 > date2) {
        date2 = date1
      }
      let date3 = date2 - date1

      const oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒数
      const oneHour = 60 * 60 * 1000 // 一小时的毫秒数
      const oneMinute = 60 * 1000 // 一分钟的毫秒数

      // 计算天数
      let days = Math.floor(date3 / oneDay)
      date3 = date3 % oneDay

      // 计算小时数
      let hours = Math.floor(date3 / oneHour)
      date3 = date3 % oneHour

      // 计算分钟数
      let minutes = Math.floor(date3 / oneMinute)
      date3 = date3 % oneMinute

      // 计算秒数
      let seconds = Math.floor(date3 / 1000)

      this.days = this.padZero(days) // 补零显示天数
      this.hours = this.padZero(hours) // 补零显示小时数
      this.minutes = this.padZero(minutes) // 补零显示分钟数
      this.seconds = this.padZero(seconds) // 补零显示秒数
    },
    padZero (num) {
      if (num < 10) {
        return '0' + num
      } else {
        return num
      }
    },

    //跳转路由
    jumpUrl (item, value) {
      localStorage.setItem('actionType', 'back')
      this.clearOrderInterval()
      // console.log(value)
      if (value == 3) {
        let params = {
          problemType: 2,
          orderNo: this.orderIng.rent[0].orderNo
        }
        this.$router.push({
          path: item,
          query: { params: JSON.stringify(params) }
        })
      } else if (value == 4 || value == 5 || value == 6) {
        let params = {
          type: value,
          orderNo: this.orderIng.rent[0].orderNo,
          penaltyAmount: this.orderIng.rent[0].billing.penaltyAmount
        }
        this.$router.push({
          path: item,
          query: {
            params: JSON.stringify(params)
          }
        })
      } else {
        this.$router.push(item)
      }
    },

    //跳转订单详情
    jumpOrder (value) {
      this.$router.push({ path: '/order/detail', query: { orderNo: value } })
    },

    // 下载app
    downloadApp () {
      let appType = this.global.terminal.platform
      if (appType.android) {
        window.open(this.androidDownloadUrl)
      } else if (appType.ios) {
        window.open(this.iosDownloadUrl)
      }
    },

    //跳转扫码
    jumpScan () {
      this.clearOrderInterval()
      this.$router.push('/scan')
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background: #ffffff;
}
.home_top {
  width: 100%;
  min-height: 182px;
  background: #b2b8bc;
  .home_top_set {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 24px;
  }
  .home_top_msg {
    display: flex;
    align-items: center;
    margin: 0 24px;
    .home_top_msg_name {
      font-size: 20px;
      font-weight: 600;
      text-align: left;
      color: #ffffff;
      line-height: 24px;
      margin-bottom: 2px;
      margin-top: 14px;
    }
    .home_top_msg_id {
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: #ffffff;
      line-height: 16px;
      margin: 8px 0;
      margin-right: 8px;
    }
    .home_top_msg_time {
      min-width: 108px;
      height: 24px;
      display: flex;
      align-items: center;
      background: #000000;
      padding: 4px 16px 4px 4px;
      border-radius: 16px;
      .home_top_msg_timeTime {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 16px;
      }
    }
  }
}
.home_content_order {
  position: absolute;
  border-radius: 5px;
  box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
  margin-top: 16px;
  background: #ffffff;
  width: calc(100% - 32px);
  left: 16px;
  z-index: 9999;
  .home_content_order_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .home_content_order_top_content {
      display: flex;
      align-items: center;
      padding: 16px;
      .home_content_order_top_contentTitle {
        font-size: 19px;
        font-weight: 600;
        text-align: left;
        color: #383838;
        line-height: 23px;
      }
    }
    .home_content_order_top_content2 {
      flex: 1;
      padding: 10px 16px;
      div {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #383838;
        line-height: 16px;
        padding: 8px 0;
      }
    }
    .home_content_order_top_content3 {
      padding: 12px 16px;
      padding-left: 0;
      margin-left: -12px;
      display: flex;
      .home_content_order_top_content_dot {
        width: 6px !important;
        height: 6px;
        margin-top: 5px;
        margin-right: 8px;
        .home_content_order_top_content_dotDiv {
          width: 6px !important;
          height: 6px;
          background: var(--text-color);
          border-radius: 50%;
        }
      }
      .home_content_order_top_contentText {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #383838;
        line-height: 16px;
      }
    }
  }
  .home_order_active {
    border-bottom: 1px solid #d3d9e3;
  }
}
.container_page {
  margin-top: -24px;
  border-radius: 13px 13px 0 0;
  background: #ffffff;
  width: 100% !important;
  padding-bottom: 108px;
  .home_content {
    margin: 0 16px;
    .home_content_top {
      margin: 24px 0 12px 0;
      border-radius: 5px;
      box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
      display: flex;
      align-items: flex-start;
      .home_content_top_tab {
        flex: 1;
        text-align: center;
        padding: 16px 8px 12px 8px;
        .home_content_top_tab_label {
          font-size: 10px;
          font-weight: 500;
          text-align: center;
          color: #39404d;
          line-height: 14px;
          white-space: nowrap;
        }
      }
    }
    .home_content_orderEnd {
      padding: 4px 0 4px 16px;
      border-radius: 5px;
      box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 17px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 20px;
      }
    }
    .home_content_pricePlan {
      padding: 16px;
      border-radius: 5px;
      box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
      margin-bottom: 12px;
      .home_content_Priceplan_title {
        font-size: 17px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 20px;
        margin-left: 10px;
      }
      .home_content_Priceplan_text {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #383838;
        line-height: 20px;
        margin-top: 12px;
      }
    }
    .home_content_rentWay {
      background-color: var(--card-color);
      box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
      padding: 0px 12px;
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
      border-radius: 10px;
      text-align: center;
      img {
        width: 100%;
        object-fit: contain;
      }
      .home_content_rentWay_item {
        flex: 1;
        flex-shrink: 0;
      }

      .home_content_rentWay_item_title {
        margin-top: 12px;
        font-size: 12px;
        font-weight: Bold;
        text-align: center;
        color: #39404d;
        line-height: 18px;
      }
    }
    .home_content_downApp {
      padding: 14px 24px 10px 20px;
      border-radius: 5px;
      background: #d2d8e2
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.62)
        );
      display: flex;
      justify-content: space-between;
      .home_content_downApp_title {
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        color: #ffffff;
        line-height: 19px;
        margin: 10px 0 18px 0;
      }
    }
  }
}
.home_button {
  ::v-deep .van-button__text {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.bannner {
  background: var(--card-color);
  box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
  border-radius: 13px;
  margin: 12px 0;
  position: relative;
  min-height: 104px;
  .left {
    width: 100%;
    padding: 24px 0;
    padding-left: 20px;
    padding-right: 128px;
    box-sizing: border-box;
    .title {
      font-size: 17px;
      font-weight: 900;
      text-align: left;
      color: #000000;
      line-height: 24px;
      margin-bottom: 12px;

      text-align: left;
    }
    .bannner_btns {
      width: 100%;
      text-align: left;
    }
  }
  .right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 128px;
    height: 115px;

    img {
      height: 100%;
    }
  }
}
</style>
